<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <a href="http://www.baidu.com">百度</a>
    <script>
        let ul = document.querySelector('ul')
        let li = document.querySelector('li')
        // 事件对象：当一个事件发生的时候，会有很对和事件相关的信息 
                    // 这些信息封装在event对象中 这个对象由浏览器创建
                    // event对象会在事件的回调函数中被系统传入
        ul.onclick = function(event){
            console.log('ul触发',event);
            
        }
        li.onclick = function(e){
            // 基于事件对象阻止冒泡
            e.stopPropagation()
            
            console.log('li触发',e);
        }

        let a = document.querySelector('a')
        a.onclick = function(e){
            // 取消事件默认行为
            e.preventDefault()
            

        }
    </script>
</body>
</html>